import React from 'react';
import { inject, observer } from 'mobx-react';
import { WeaReqTop, WeaRightMenu, WeaLocaleProvider, WeaTab, WeaProgress } from 'ecCom'
import { WeaTableNew } from 'comsMobx'
import {toJS} from 'mobx'
import { Button,message } from 'antd';
import { ConditionNum } from '../list/listCondition'
import GovernLight from '../governPoint/light';
import GovernBadge from '../governPoint/badge';
import Model from '../model/index';
import ModalConfirm from '../modalConfirm/index';
import BtnType from '../../../util/btnType';
const getLabel = WeaLocaleProvider.getLabel;
const WeaTable = WeaTableNew.WeaTable;
@inject("proStore")
@observer
export default class GovernFeedback0 extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            tabKey: "",
            tabs: [],
            title: "",
            btns: [
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ybfqqn@expost`} type="primary" onClick={()=>this.doexport()}>{getLabel(17416,"导出")}</Button>,
                ],
        }
    }

    componentDidMount = () => {
        const { proStore } = this.props;
        // const preDataType = this.props.location.query.dataType || "0";
        const preDataType =  "0";
        this.setState({ tabKey: preDataType });
        const dateType = preDataType == "2" ? "14" : (preDataType == "1" ? "13" : "10");
        this.setTabs(preDataType);
        proStore.setDataType(dateType);
        //初始化页面
        if (!proStore.isSuperSearch) {
            proStore.init({ "isSuper": "0", "isSuperPage": false, "fromSuperPage": true, "selectedTreeKey": 0 ,"pagefrom": "feed"})
        }
    }
    componentWillReceiveProps(nextProps) {
        if(nextProps.location.key != this.props.location.key){//19.01.16刷新菜单视图不更新
            //设置dataType
            const {proStore} =nextProps;
            // const nextDataType = nextProps.location.query.dataType;
            const nextDataType = "0";
            const dateType = nextDataType == "2" ? "14" : (nextDataType == "1" ? "13" : "10");
            proStore.setDataType(dateType);

            this.setTabs(nextDataType);
            //刷新重新渲染
            if( !proStore.isSuperSearch){
                proStore.setDoAgain(false)
                proStore.init({ "isSuper":"0","isSuperPage":false,"fromSuperPage":true,"selectedTreeKey":0,"pagefrom": "feed"})
            }
        }
    }

    setTabs(preDataType){
        if(preDataType == "0"){
            this.setState({
                title:getLabel('500426',"我的反馈"),
                tabs:[{ key: '10', title: getLabel('126831',"全部") }, { key: '8', title: getLabel('390908',"主办事项")}, { key: '9', title: getLabel(390909,'协办事项') }]
            })
        }else if(preDataType == "1"){
             this.setState({
                title:getLabel('500427',"待阅反馈"),
                tabs:[{ key: '13', title: getLabel('126831',"全部") },{ key: '11', title: getLabel('500427',"待阅反馈") }, { key: '12', title: getLabel('501319',"已阅反馈") }],
            })
        }else if(preDataType == "2"){
            this.setState({
               title:getLabel('501320',"反馈查询"),
               tabs:[],
           })
       }
    }

    render() {
        const { proStore } = this.props;
        const { status, tasklabels, form, tableStoreDbInquire, formB, dataType, modelType, id, content,columnsNum,baseSearchValue } = proStore;
        const { loading } = status;
        const { topIcon = "icon-coms-government", iconBgcolor = "#f14a2d" } = tasklabels;
        const { visible, tabKey } = this.state;
        let rightMenu = this.getRightMenu();
        let tablescroll = document.body.clientHeight - 223.89-54;
        return (
            <div className="g-pro">
                <div className='g-pro-proMain g-account'>
                    <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@vehz27`} style={{ color: "#ccc" }} datas={rightMenu}>
                        <WeaReqTop ecId={`${this && this.props && this.props.ecId || ''}_WeaReqTop@ptm2tw`}
                            loading={loading}
                            icon={<i className={topIcon} />}
                            iconBgcolor={iconBgcolor}
                            title={this.state.title || ""}
                            tabDatas={this.state.tabs || []}
                            selectedKey={dataType}
                            showDropIcon={true}
                            dropMenuDatas={rightMenu}
                            buttons={this.state.btns}
                            onChange={this.changeTab.bind(this)}
                        >
                        
                        <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@em333v`}
                            datas={[]}
                            searchType={['base', 'advanced']}
                            setShowSearchAd={(visible) =>{this.props.proStore.baseSearchValue = '';this.setState({ visible })}  }
                            searchsAd={
                                <ConditionNum ecId={`${this && this.props && this.props.ecId || ''}_ConditionNum@8jd7f8`} listStore={proStore} type="project" formB={formB} col={2} onEnterSearch={(visible) => this.setState({ visible })}></ConditionNum>
                            }
                            searchsBaseValue = {baseSearchValue}
                            buttonsAd={this.getSearchButtons()}
                            showSearchAd={visible}
                            onSearch={this.onSearch}
                            onSearchChange ={this.onSearchChange}
                        >
                        </WeaTab>
                        <div>
                            {
                                //  (!tableStoreDbInquire.loading && toJS(tableStoreDbInquire).columns.length>0 ) && //xk:解决无数据不显示列头问题(可以删除，因为其内部自己处理了自带loading)
                                <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@ln9itg`}
                                    dragColumns = '0'
                                    comsWeaTableStore={tableStoreDbInquire}
                                    hasOrder={true}
                                    //needScroll={true}
                                    getColumns={c => this.reRenderColumns(c)}
                                    onOperatesClick={this.onOperatesClick.bind(this)}
                                    scroll={columnsNum<=10?{x:0,y:tablescroll}:{ x: 100*columnsNum,y:tablescroll }}
                                />
                            }
                            
                        </div>
                        <div>
                            <Model ecId={`${this && this.props && this.props.ecId || ''}_Model@h218h8`} modelType={modelType} id={id} contentStore={proStore} ></Model>
                        </div>
                        <div>
                            <ModalConfirm ecId={`${this && this.props && this.props.ecId || ''}_ModalConfirm@ss4o5m`} modelType={modelType} id={id} content={content} confirmStore={proStore}></ModalConfirm>
                        </div>
                        </WeaReqTop>
                    </WeaRightMenu>
                </div>
            </div>
        )
    }

    onOperatesClick(record, index, operate, flag) {
        let _href = operate && operate.href ? operate.href : "";
        let fn = _href.replace("javascript:", "");
        fn = fn.substring(0, fn.indexOf('('));
        if (fn != "") {
            this.doAction(fn.replace("fn", ""), record);
        }
    }

    reRenderColumns(columns) {
      const {proStore:{getcolumnsNum}} = this.props;
      let columnsIndex = 0;
        columns.forEach(c => {
            //19.3.8 lusx #566607 概述：E9，督办，列表，标题较多，没有横向滚动条，没展示全
            if (c.display === "true") {
                columnsIndex = columnsIndex + 1;
            }
            if (c.dataIndex == 'progress') {
                c.render = function (text, record) {
                    return <span className='wea-prj-progressStyle' >
                        <WeaProgress ecId={`${this && this.props && this.props.ecId || ''}_WeaProgress@35i75p@${c.dataIndex}`} percent={record.progress || 0} />
                    </span>
                }
            } else if (c.dataIndex == 'status') {
                c.render = function (text, record) {
                    return <span >
                        <GovernLight ecId={`${this && this.props && this.props.ecId || ''}_GovernLight@wf92j4`} record={record} />
                    </span>
                }
            } else if (c.dataIndex == 'feedstatus') {
                c.render = function (text, record) {
                    return <span >
                        <GovernLight ecId={`${this && this.props && this.props.ecId || ''}_GovernLight@euf1f2`} record={record} showType="feedback"/>
                    </span>
                }
            } else if (c.dataIndex == 'enddate') {
                c.render = function (text, record) {
                    return <span>
                        <GovernBadge ecId={`${this && this.props && this.props.ecId || ''}_GovernBadge@olwibb`} record={record} text={text} hideMsg={true} />
                    </span>
                }
            } else if (c.dataIndex == 'name') {
                c.render = function (text, record) {
                    let hrefText = `javaScript:hrefTaskInfo(${record.id});`
                    return <span>
                        {/*   {record.sKeyFlagspan === "1" ? <span className="g-table-cui">{getLabel('390310',"催")}</span>: null}   */}
                        <a href={hrefText} target="_self">{text}</a>
                    </span>
                }
            } else {
                c.render = function (text, record) {
                    let valueSpan = record[c.dataIndex + "span"] !== undefined ? record[c.dataIndex + "span"] : record[c.dataIndex];
                    return <span dangerouslySetInnerHTML={{ __html: valueSpan }}></span>
                }
            }
        })
        getcolumnsNum(columnsIndex+4);
        return columns;
    }

    /**
     * 接口执行方法
     */
    doAction = (fn, record) => {
        const { proStore } = this.props;
        let id = record.id;
        if (BtnType.checkShowModel(fn)) {
            proStore.getActionSetting(id, fn);
        } else if (BtnType.checkShowConfirm(fn)) {
            proStore.showconfirm(id, fn, BtnType.getTitle(fn), BtnType.getContent(fn));
        } else {
            proStore.modelStore.subBtn(fn, id);
        }
    }

    /* 高级搜索操作按钮组 */
    getSearchButtons() {
        const { proStore } = this.props;
        const { clearFormFields } = proStore;
        const btnStyle = { borderRadius: 3, width: 80 }
        return [
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ul13bk@search`} type="primary" style={btnStyle} onClick={this.forwardQueryResult.bind(this)}>{getLabel(197,"搜索")}</Button>),
            (<span style={{ width: '15px', display: 'inline-block' }}></span>),
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@6i34yw@reset`} type="ghost" style={btnStyle} onClick={() => { clearFormFields() }}>{getLabel(2022,"重置")}</Button>),
            (<span style={{ width: '15px', display: 'inline-block' }}></span>),
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@9847up@cancel`} type="ghost" style={btnStyle} onClick={() => { this.cancel() }}>{getLabel(201,"取消")}</Button>)
        ]
    }

    /* 搜索面板搜索方法 */
    forwardQueryResult() {
        const { proStore } = this.props;
        const { selectedTreeKey } = proStore
        proStore.doSearch({ fromSuperPage: true, "categoryid": selectedTreeKey, "isSuperSearch": true })
        this.setState({ visible: false })
    }

    /* 高级搜索取消方法 */
    cancel() {
        this.setState({ visible: false })
    }

    onSearchChange = (params) =>{
        const { proStore} = this.props;
        proStore.baseSearchValue = params;
    }

    changeTab = (key) => {
        const { proStore } = this.props;
        proStore.setDataType(key);
        proStore.baseSearchValue = '';
        proStore.init({ "isSuper": "0", "isSuperPage": false, "fromSuperPage": true, "selectedTreeKey": 0 })
    }

    getRightMenu() {
        let btns = [];
        btns.push({
            key: "search",
            icon: <i className='icon-coms-search' />,
            content: getLabel(197, "搜索"),
            onClick: this.onSearch.bind(this)
        });
        btns.push({ key: "export", icon: <i className='icon-coms-export'/>, content: getLabel(17416, '导出', 'label'),onClick: () => this.doexport() });
        return btns;
    }

    onSearch = (value) => {
        const { proStore } = this.props;
        proStore.onSearch2(value);
    }

    doexport = () =>{
        const { proStore } = this.props;
        let selectedIds = toJS(proStore.tableStoreDbInquire.selectedRowKeysAllPages);
        const { selectedTreeKey } = proStore
        if (selectedIds.length == 0) {
            message.warning(getLabel(501159,'请选择要操作的数据'));
        } else {
            // console.log("this.state.ti",this.state.title)
            proStore.exportGovernExcel(selectedIds,"27", getLabel(17416,"导出"), getLabel('508054',"确认要导出吗？"),selectedTreeKey,'3', this.state.title);
        }
      
    }
}
